<template>
  <div>
    <Header></Header>
    <div class="banner">
      <img src="@/static/images/wall-hanging/banner.jpg" alt="" />
    </div>
    <div class="breadcrumb">
      <div>首页 / 装饰摆件</div>
    </div>
    <div class="main">
      <div class="main1">
        <img src="@/static/images/wall-hanging/tit01.jpg" alt="" />
        <img src="@/static/images/wall-hanging/paint01.jpg" alt="" />
        <ul>
          <li v-for="item in Data.main1" :key="item.id">
            <img
              :src="require('@/static/images/wall-hanging/' + item.img)"
              alt=""
            />
            <p class="title">{{ item.title }}</p>
            <p class="price">{{ item.price }}</p>
          </li>
        </ul>
      </div>
      <div class="main2">
        <img src="@/static/images/wall-hanging/tit02.jpg" alt="" />
        <img src="@/static/images/wall-hanging/paint02.jpg" alt="" />
        <ul>
          <li v-for="item in Data.main2" :key="item.id">
            <img
              :src="require('@/static/images/wall-hanging/' + item.img)"
              alt=""
            />
            <p class="title">{{ item.title }}</p>
            <p class="price">{{ item.price }}</p>
          </li>
        </ul>
      </div>
      <div class="main3">
        <img src="@/static/images/wall-hanging/tit03.jpg" alt="" />
        <div>
          <img src="@/static/images/wall-hanging/sec301.jpg" alt="" />
          <ul>
            <li v-for="item in Data.main3" :key="item.id">
              <img
                :src="require('@/static/images/wall-hanging/' + item.img)"
                alt=""
              />
              <p class="title">{{ item.title }}</p>
              <p class="price">{{ item.price }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="main2">
        <img src="@/static/images/wall-hanging/tit04.jpg" alt="" />
        <ul>
          <li v-for="item in Data.main4" :key="item.id">
            <img
              :src="require('@/static/images/wall-hanging/' + item.img)"
              alt=""
            />
            <p class="title">{{ item.title }}</p>
            <p class="price">{{ item.price }}</p>
          </li>
        </ul>
      </div>
    </div>
    <Footer></Footer>
    <Tabbar></Tabbar>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Header from '@/components/header/index.vue';
import Footer from '@/components/footer/index.vue';
import Tabbar from '@/components/tabbar/index.vue';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const Data = require('@/mock/wall-hanging/index.json');

export default defineComponent({
  components: { Header, Footer, Tabbar },
  setup() {
    return {
      Data,
    };
  },
});
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  img {
    width: 100%;
  }
}
.breadcrumb {
  width: 100%;
  border-bottom: 1px solid #ddd;
  font-size: 12px;

  div {
    width: 1164px;
    margin: 0 auto;
    padding: 10px 0px;
  }
}
.main {
  width: 1164px;
  margin: 0 auto;
  text-align: center;
}
.main1,
.main2 {
  width: 100%;
  margin-top: 42px;

  img:nth-child(2) {
    margin-top: 20px;
  }

  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;

    li {
      text-align: left;
      margin-top: 20px;

      .price {
        font-size: 22px;
        color: red;
      }
      &:hover {
        border: 1px solid #ccc;
        box-shadow: 0px 0px 5px #ddd;
        transform: scale(1.02);
      }
    }
  }
}

.main3 {
  width: 100%;
  margin-top: 42px;

  div {
    width: 100%;
    display: flex;
    margin-top: 10px;

    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: space-between;
      margin-left: 18px;
    }
  }
}
</style>
